<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"	
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/pages/plantilla.xhtml">
	
	<ui:define name="title">Iniciar Cronograma</ui:define>
	<ui:define name="contenido" >
	<f:view>
		<h:form id="frmProcIniCron" prependId="false" style="font-size:12px">
<script type="text/javascript">
PrimeFaces.locales['es'] = {
        closeText: 'Aceptar',
        prevText: 'Anterior',
        nextText: 'Siguiente',
        currentText: 'Inicio',
        monthNames: ['Enero','Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
        dayNames: ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
        dayNamesShort: ['Dom','Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
        dayNamesMin: ['D','L','M','MI','J','V','S'],
        weekHeader: 'Semana',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        timeOnlyTitle: 'Solo hora',
        timeText: 'Tempo',
        hourText: 'Hora',
        minuteText: 'Minuto',
        secondText: 'Segundo',
        currentText: 'Fecha actual',
        ampm: false,
        month: 'Mes',
        week: 'Semana',
        day: 'Dia',
        allDayText : 'Todo el dia'
    };
</script>
			<p:tabView id="tabView" activeIndex="#{procInitCronoController.tabActivo}" style="width:100%">  
			    <p:tab id="tab1" title="Listado de Cronogramas Academicos">  
			    <h:outputText value="Anio:"/>
			    <h:selectOneMenu>
			    <f:selectItem itemValue="2012" itemLabel="2012"/>
			    <f:selectItem itemValue="2013" itemLabel="2013"/>
			    </h:selectOneMenu>
				    <p:dataTable id="dtCronos" var="cronograma" value="#{procInitCronoController.listCronogramas}"   
				                 paginator="true" rows="10" selectionMode="single" selection="#{procInitCronoController.cronogramaSeleccionado}"
				                 rowSelectListener="#{procInitCronoController.editarCronograma}" dblClickSelect="true" onRowSelectUpdate="tabView, panCursos"
				                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
				                 >  
				        <p:column>  
				            <f:facet name="header">  
				                <h:outputText value="Nombre" />  
				            </f:facet>  
				            <h:outputText value="#{cronograma.nomCronogramaAcademico}" />  
				        </p:column>  
				  
				        <p:column>  
				            <f:facet name="header">  
				                <h:outputText value="Fecha inicio" />  
				            </f:facet>  
				            <h:outputText value="#{cronograma.fechaInicio}" />  
				        </p:column>
				        <p:column>  
				            <f:facet name="header">  
				                <h:outputText value="Fecha fin" />  
				            </f:facet>  
				            <h:outputText value="#{cronograma.fechaFin}" />  
				        </p:column>  
				        <p:column>  
				            <f:facet name="header">  
				                <h:outputText value="Nro. semanas" />
				            </f:facet>  
				            <h:outputText value="#{cronograma.numSemanas}" />  
				        </p:column>    
				    </p:dataTable>
			    </p:tab>  
			  
			    <p:tab id="tab2" title="Registrar/Editar">
			    		<p:commandButton image="ui-icon-document" title="Nuevo"
			    		actionListener="#{procInitCronoController.nuevoCronograma}" update=":frmProcIniCron:tabView, :frmProcIniCron:panCursos"/>
			    		<p:spacer width="10px"/>
			    		<p:commandButton image="ui-icon-disk" title="Guardar"
			    		actionListener="#{procInitCronoController.guardarCronograma}" update=":frmProcIniCron:tabView, :frmProcIniCron:panCursos"/>
						<p:panel>
							<table>
							<tr>
								<td align="right">
								<h:outputText value="Nombre:"/>
								</td>
								<td><p:inputText style="width:300px" value="#{procInitCronoController.cronogramaEditar.nomCronogramaAcademico}"/>
								</td>
								<td align="right"><h:outputText value="Nro. Semanas:"/></td>
								<td><p:inputText value="#{procInitCronoController.cronogramaEditar.numSemanas}"/> </td>
							</tr>
							<tr>
								<td>
								<h:outputText value="Fecha Inicio:"/>
								</td>
								<td><p:calendar locale="es" pattern="dd/MM/yyyy" value="#{procInitCronoController.cronogramaEditar.fechaInicio}"/>
								</td>
								<td align="right">
								<h:outputText value="Fecha Fin:"/>
								</td>
								<td><p:calendar locale="es" pattern="dd/MM/yyyy" value="#{procInitCronoController.cronogramaEditar.fechaFin}"/>
								</td>
							</tr>
							<tr>
								<td>
								<h:outputText value="Tipo Periodo:"/>
								</td>
								<td><h:selectOneMenu id="soPeriodo" value="#{procInitCronoController.cronogramaEditar.idPeriodo}">
								<f:selectItem itemValue="" itemLabel="Escoja una opcion"/>
								<f:selectItem itemValue="1" itemLabel="Anual"/>
								<f:selectItem itemValue="2" itemLabel="Semestral"/>
								</h:selectOneMenu>
								</td>
								<td><h:outputText value="Carrera Profesional:"/></td>
								<td><h:selectOneMenu id="soCarrera" value="#{procInitCronoController.cronogramaEditar.idCarreraProfesional}">
								<f:ajax listener="#{procInitCronoController.listarPlanesEstudios}" render="panCursos"/>
								<f:selectItem itemValue="" itemLabel="Escoja una opcion"/>
								<f:selectItems value="#{procInitCronoController.carreras}" 
								var="car" itemValue="#{car.idCarreraProf}" itemLabel="#{car.nomCarreraProf}"/>
								</h:selectOneMenu>
								</td>
							</tr>
							</table>
						</p:panel>
						<p:commandButton value="Agregar Cursos" onclick="dlgCursos.show()"/>
						<p:panel>
						<h:selectBooleanCheckbox id="sbAct" 
						value="#{procInitCronoController.cronogramaEditar.idActSyl}" />
    					<h:outputLabel value="Aceptar Actualizaciones de syllabus" for="sbAct" />
								<p:dataTable id="dtCursosCronograma" value="#{procInitCronoController.cronogramaEditar.cursosCronograma}"
								var="cursoCro">
									<p:column headerText="Plan de Estudio">
							            <h:outputText value="#{cursoCro.curso.planEstudio.desPlanEstudio}"/>
									</p:column>
									<p:column headerText="Periodo Academico">
							            <h:outputText value="#{cursoCro.curso.periodoAcademico.nomPeriodo}"/>
									</p:column>
									<p:column headerText="Curso">
							            <h:outputText value="#{cursoCro.curso.nomCurso}"/>
									</p:column>
									<p:column headerText="Grupos">
										<p:dataList value="#{cursoCro.grupos}" var="grupo">
										#{grupo.nomGrupo}
										</p:dataList>
									</p:column>
									<p:column headerText="Editar Grupos">
									<p:commandButton image="ui-icon-pencil" title="editar grupos" oncomplete="wvGrups.show();" 
									update=":frmProcIniCron:opGrups," action="#{procInitCronoController.editarGrupos}">
									<f:setPropertyActionListener target="#{procInitCronoController.cursoCroSeleccionado}" value="#{cursoCro}"/>
									</p:commandButton>
									</p:column>
									<p:column headerText="Eliminar">
									<p:commandButton image="ui-icon-trash" title="eliminar curso" 
									action="#{procInitCronoController.eliminarCursoCro}" update=":frmProcIniCron">
									<f:setPropertyActionListener target="#{procInitCronoController.cursoCroSeleccionadoEl}" value="#{cursoCro}"/>
									</p:commandButton>
									</p:column>
								</p:dataTable>
						</p:panel>
			    </p:tab>  
			</p:tabView> 
			<p:dialog widgetVar="dlgCursos" header="Agregar Cursos" width="450">
						<p:panel style="width:100%" id="panCursos">
						<p:commandButton image="ui-icon-plusthick" title="Anadir Cursos Seleccionados"
						actionListener="#{procInitCronoController.anadirCursosSeleccionados}" update="dtCursosCronograma"/>
						<table style="width:100%">
						<tr><td><h:outputText value="Plan de Estudios:"/></td>
						<td><h:selectOneMenu id="soPlanesEst" value="#{procInitCronoController.idPlanEstSeleccionado}">
						<f:ajax listener="#{procInitCronoController.listarPeriodosAcads}" render="soPeriodosAcads"/>
						<f:selectItem itemValue="" itemLabel="Escoja una opcion"/>
						<f:selectItems value="#{procInitCronoController.planesEstudios}" var="plan" 
						itemValue="#{plan.idPlanEstudio}" itemLabel="#{plan.desPlanEstudio}"/>
						</h:selectOneMenu></td>
						</tr>
						<tr><td><h:outputText value="Periodo Academico:"/></td>
						<td><h:selectOneMenu id="soPeriodosAcads" value="#{procInitCronoController.idPerAcadSeleccionado}">
						<f:ajax listener="#{procInitCronoController.listarCursos}" render="dtCursos"/>
						<f:selectItem itemValue="" itemLabel="Escoja una opcion"/>
						<f:selectItems value="#{procInitCronoController.periodoAcads}" var="per" 
						itemValue="#{per.idPlanEstPerAcad}" itemLabel="#{per.nomPeriodo}"/>
						</h:selectOneMenu></td>
						</tr>
						<tr><td colspan="2">
						<DIV style="width:100%;height:200px; overflow:scroll;">
							<p:dataTable id="dtCursos" value="#{procInitCronoController.cursos}" var="curso" 
							selection="#{procInitCronoController.cursosSeleccionados}">
								<p:column selectionMode="multiple" style="width:18px" />  
								<p:column headerText="Curso">
						            <h:outputText value="#{curso.nomCurso}"/>
								</p:column>
								<p:column headerText="Credito">
						            <h:outputText value="#{curso.numCreditos}"/>
								</p:column>
							</p:dataTable>						
						</DIV>
						</td>
						</tr>
						</table>
						</p:panel>
			</p:dialog>		
			<p:dialog id="dlgGrup" widgetVar="wvGrups" width="600" header="Editar Grupos">
			<p:outputPanel id="opGrups">
			#{procInitCronoController.cursoCroEditar.curso.nomCurso}
			<table>
			<tr><td><h:outputText value="Seccion"/></td><td><h:outputText value="Docente"/></td>
			<td></td>
			</tr>
			<tr><td><p:inputText value="#{procInitCronoController.grupoEditar.nomGrupo}" style="width:100px"/></td>
			<td>
			<p:autoComplete value="#{procInitCronoController.grupoEditar.docente.nomDocente}"
			completeMethod="#{procInitCronoController.autoCompletarDocente}" minQueryLength="3"
			selectListener="#{procInitCronoController.asignarIdDocente}" style="width:300px"/>
			</td>
			<td>
			<p:commandButton image="ui-icon-disk" title="Guardar" actionListener="#{procInitCronoController.guardarGrupo}"
			update="opGrups, dtCursosCronograma "/>
			<p:commandButton image="ui-icon-document" title="Nuevo" actionListener="#{procInitCronoController.nuevoGrupo}"
			update="opGrups"/>
			<p:commandButton image="ui-icon-trash" title="Eliminar" actionListener="#{procInitCronoController.eliminarGrupo}"
			update="opGrups, dtCursosCronograma" rendered="#{procInitCronoController.eliminarHabilitado}"/>
			</td>
			</tr>
			</table>
			<p:dataTable value="#{procInitCronoController.cursoCroEditar.grupos}" var="grupEd" selectionMode="single"
			selection="#{procInitCronoController.grupoEdSeleccionado}" rowSelectListener="#{procInitCronoController.editarGrupo}"
			onRowSelectUpdate="opGrups" >
				<p:column headerText="Seccion">
				<h:outputText value="#{grupEd.nomGrupo}"/>
				</p:column>
				<p:column headerText="Profesor">
				<h:outputText value="#{grupEd.docente.nomDocente}"/>
				</p:column>
			</p:dataTable>
			</p:outputPanel>
			</p:dialog>

 		</h:form>
 		</f:view>
	</ui:define>
</ui:composition>